-------------
jQuery and flot
http://jquery.com/
-------------

javaScript is a "client-side" language for web programming. (We've been using Perl for "server-side" programming.) JavaScript code is executed by the user's browser/computer and is often contained in the HTML page itself using <script> tags.

One of the nice things about JavaScript is that it enables you to do a number of things that basic HTML cannot handle on its own. An popular early example was slide shows for jpeg images. 

There were two problems with JavaScript, from my point of view. One, different kinds of browsers handled/interpreted JavaScript in different ways. If you developed some scripting that worked beautifully for MS Internet Explorer, you couldn't be sure that it would work for Firefox as well. This is not a problem, obviously, for server-side programming since the same server is executing the script regardless of the browser being used by the user. 

The second problem is that JavaScript could get clunky and it was difficult to separate the "actions" of interest from the "objects" that were supposed to be doing the actions. Most JavaScript coding was done on an object by object basis, which was cumbersome, clunky, and, well, not fun.

jQuery is a fast and concise JavaScript Library that "simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development." For our purposes, it solves two problems. One, because qQuery scripts are designed to work across a variety of browsers, there is less of a need to worry about whether scripts you use will work appropriately in IE vs. Firefox. Second, jQuery allows for a cleaner separation of actions from objects. One of the reasons we used CSS early in the course was that it provided a means to separate style and content. jQuery provides us with a means to separate style, content, and behavior, making our code/pages much more portable,  flexible, and easier to manage.

Caution: jquery will not function appropriately for users if they do no not have javascript enabled on their browsers. Sometimes people turn it off for add-blocking purposes.


-------------
Using jQuerry
-------------

To use jQuerry your web page needs to contain a reference to a jQuery library. One way to do this is to download the jQuery library and store it in a well defined place on your server. You will then reference this location in your HTML code near the start--in the same kind of place where you might list out some CSS code if you're embedding it in the page itself.

You can download the library for free from here: http://jquery.com/

On my server I have the jquery library stored in a /jquery/ folder. As such, I can reference it in this manner if I use a "relative" path:

	<script type='text/javascript' src='/jquery/js/jquery-1.3.2.min.js'></script>


or in this manner if I use an "absolute" path:

	<script type='text/javascript' src='http://www.web-research-design.net/jquery/js/jquery-1.3.2.min.js'></script>

For the purposes of lecture, you should probably use the absolute path and specify MY server. That was you can play around with things right away and worry about setting up jquery on your own server at another time. (Setting it up shouldn't take long, but if you're using the File Manager on Netfirms, it will take a while since [I don't think] you can copy entire directories at once, whereas you can do so with most FTP programs.) Try setting it up on your own server later today.

-------------
flot
-------------

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. The focus is on simple usage (all settings are optional), attractive looks, and interactive features like zooming and mouse tracking. 

For our purposes, flot is a powerful tool for providing graphical feedback to our research participants or for ourselves.

You can download the flot library here: http://code.google.com/p/flot/

You should unzip and copy the directory to your jquery directory.

You can also load this library within a page via the following script line:

	<script language='javascript' type='text/javascript' src='/jquery/flot/jquery.flot.js'></script>

Or, using absolute pathing,

	<script language='javascript' type='text/javascript' src='http://www.web-research-design.net//jquery/flot/jquery.flot.js'></script>


When flot is used, you also need the basic jquery library. As such, in most flotting applications, you'll have something like this at the top of each Perl script:

print "<head>
	<script type='text/javascript' src='/jquery/js/jquery-1.3.2.min.js'></script>
	<script language='javascript' type='text/javascript' src='/jquery/flot/jquery.flot.js'></script>
</head>";


-------------
Some flot examples
-------------

There are some nice examples of the use of flot plots at the following location: http://people.iola.dk/olau/flot/examples/

We'll discuss these in class before moving on to the class-specific examples.


Create a CSS object that will "hold" the graph.

	print "<div id='placeholder' style='width:600px;height:300px'></div>";

The basic call for a flot:

	<script id='source' language='javascript' type='text/javascript'>$(function () { DEFINE DATA ARRAY(S),  $.plot($('#placeholder'), ADDITIONAL STYLISTIC PARAMETERS )};</script]


Examples of defining data arrays


    var d1 = [[1, 10],[6, 12]];
    var d2 = [[5, 5], [2, 6] ];

    or 
    
    [[1, 10],[6, 12]]

Stylistic parameters vary from one plot type to the next. Best to look at examples and copy and paste and experiment.